<!-- 轮播图、快讯、深度资讯配置 -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="类型">
                            <a-select v-model="infoType" placeholder="请选择" allowClear @change="getBanner">
                                <a-select-option v-for="(item,i) in infoTypeList" :key="i" :value="item.appInfoType">{{item.description}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="是否置顶">
                            <a-select v-model="isTop" placeholder="请选择" allowClear @change="getBanner">
                                <a-select-option v-for="(item,i) in isTopList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="16" :sm="24">
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item >
                            <a-button style="margin-right: 20px" type="primary" @click="getAllData()">查询</a-button>
                            <a-button icon="plus" @click="add()">新增</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <a-table rowKey="id" :loading="isload" @change="handleTableChange" :columns="columns" :pagination="{ pageSize: 10, total: total ,showSizeChanger: true,pageSize: size}" :data-source="dataList"  size="small" :scroll="{ x: 1800, }">
            <div slot="infoType" slot-scope="infoType">
                <span>{{infoTypeCoput(infoType)}}</span>
            </div>
            <div slot="isAddParam" slot-scope="isAddParam">
                <span>{{isTopeCoput(isAddParam)}}</span>
            </div>
            <div slot="isOn" slot-scope="isOn">
                <a-switch checked-children="开" un-checked-children="关" disabled :checked="isOn == 1 ? true : false" />
            </div>
            <div slot="isTop" slot-scope="isTop">
                <span>{{isTopeCoput(isTop)}}</span>
            </div>
            <img class="imgUrl" slot="imgUrl" slot-scope="imgUrl" :src="imgUrl && imgUrl.split(',')[0]" alt="" @click="showImg(imgUrl)">
            <template slot="operation" slot-scope="text, record">
                <div class="editable-row-operations">
                    <a-button type="link" @click="update(record)">修改</a-button>
                    <a-popconfirm
                        title="是否确认删除当前数据?"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="del(record)"
                    >
                        <a-button type="link">删除</a-button>
                    </a-popconfirm>
                </div>
            </template>
        </a-table>

        <a-modal
            title="添加、修改轮播图"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="visible = false"
            >
            <div>
                <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 17 }">
                    <a-form-item label="标题">
                        <a-input v-model="item.title" placeholder="请输入标题" allow-clear></a-input>
                    </a-form-item>
                    <a-form-item :label="item.infoType == 17 ? '申卡奖励' : '内容'">
                        <a-input v-model="item.content" type="textarea" placeholder="请输入内容" allow-clear></a-input>
                    </a-form-item>
                    <a-form-item label="跳转链接">
                        <a-input v-model="item.jumpUrl" placeholder="请输入跳转链接" allow-clear></a-input>
                    </a-form-item>
                    <a-form-item :label="item.infoType == 17 ? '奖励金额' : '点赞数量'">
                        <a-input v-model="item.likeCount" placeholder="请输入已点赞次数" allow-clear></a-input>
                    </a-form-item>
                    <a-form-item :label="item.infoType == 17 ? '阅读数量' : '阅读数量'">
                        <a-input v-model="item.viewCount" placeholder="请输入已经阅读的次数" allow-clear></a-input>
                    </a-form-item>
                    <a-form-item label="分享数量">
                        <a-input v-model="item.shareCount" placeholder="请输入已经分享的次数" allow-clear></a-input>
                    </a-form-item>
                    <a-form-item label="信息类型">
                        <!-- <a-select v-model="item.infoType" placeholder="请选择" allowClear>
                            <a-select-option v-for="(item,i) in infoTypeList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                        </a-select> -->
                        <a-radio-group v-model="item.infoType" >
                            <a-radio  v-for="(item,i) in infoTypeList" :key="i" :value="item.appInfoType">{{item.description}}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="是否传参">
                        <a-radio-group v-model="item.isAddParam" >
                            <a-radio  v-for="(item,i) in isTopList" :key="i" :value="item.id">{{item.name}}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="是否置顶">
                        <a-radio-group v-model="item.isTop" >
                            <a-radio  v-for="(item,i) in isTopList" :key="i" :value="item.id">{{item.name}}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="是否开启">
                        <a-radio-group v-model="item.isOn" >
                            <a-radio  v-for="(item,i) in isTopList" :key="i" :value="item.id">{{item.name}}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item :label="item.infoType == 17 ? '特点' : '作者'">
                        <a-input v-model="item.author" placeholder="请输入作者姓名" allow-clear></a-input>
                    </a-form-item>
                    <a-form-item label="图片">
                        <a-tag color="#f50">
                            修改时，如果上传图片就会覆盖掉之前的图片，如果不修改就无需上传
                        </a-tag>
                        <div class="clearfix">
                            <a-upload
                            list-type="picture-card"
                            :file-list="fileList"
                            @preview="handlePreview"
                            @change="handleChange"
                            >
                            <div v-if="fileList.length < 5">
                                <a-icon type="plus" />
                                <div class="ant-upload-text">
                                    选择图片
                                </div>
                            </div>
                            </a-upload>
                            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                                <img alt="example" style="width: 100%" :src="previewImage" />
                            </a-modal>
                        </div>
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>

        <!-- 上传图片预览 -->
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
        <!-- 表格图片预览 -->
        <a-modal :visible="previewImgVisible" :footer="null" @cancel="previewImgVisible = false">
            <a-carousel autoplay dots-class="slick-dots slick-thumb" arrows style="margin-bottom:60px">
                <div v-for="(img,i) in showImgs" :key="i">
                    <img :src="img" alt=""/>
                </div>
                <a slot="customPaging" slot-scope="props">
                    <img :src="getImgUrl(props.i)" />
                </a>
            </a-carousel>
        </a-modal>
    </div>


</template>

<script>
import { columns } from './table'
import { queryBanner , updateBanner , queryNewsClassification } from '@/api/brand'
import { getBase64 , fileProcess } from '@/utils/util';
export default {
    data () {
        return {
            infoType: undefined, // 1:轮播图，2：快讯，3：深度资讯
            isTop: undefined, // 是否置顶，0：否，1：是
            brandId: this.global.brandId,
            brandList: [],
            page: 1,
            size: 10,
            total: 0,
            dataList: [],
            columns,
            isload: false,
            editingKey: '',
            cacheData: [],
            infoTypeList: [
                { id: 1, description: '轮播图' },
                { id: 2, description: '快讯' },
                { id: 3, description: '深度资讯' },
            ],
            isTopList: [
                { id: 1, name: '是'},
                { id: 0, name: '否'},
            ],
            visible: false,
            confirmLoading: false,
            item: {
                title: '',
                id: '',
                content: '',
                jumpUrl: '',
                author: '',
                infoType: 1,
                shareCount: '',
                viewCount: '',
                isAddParam: 1,
                isTop: 1,
                isOn: 1,
            },
            fileList: [],
            previewVisible: false,
            previewImage: '',
            previewImgVisible: false,
            showImgs: [],
        }
    },
    async created(){
        try {
            this.getAllData()
        } catch (error) {
            this.$notification['error']({
                message: '提示',
                description: '网路丢失，请稍后再试！',
                duration: 8,
            })
        }
    },
    methods: {
        // 查询新闻分类信息
        getClassification(){
            let _this = this
            return new Promise((resolve,reject)=>{
                queryNewsClassification({'brandId':_this.brandId})
                .then(res=>{
                    if(res.success){
                        _this.infoTypeList = res.data
                    }
                    resolve()
                })
            })
        },
        // 获取品牌的轮播图、快讯、深度资讯信息
        getBanner(){
            var _this = this
            _this.isload = true
            const params = {
                brandId: _this.brandId,
                infoType: _this.infoType,
                isTop:_this.isTop,
                page: _this.page - 1,
                size: _this.size,
            }
            queryBanner(params)
            .then(res=>{
                if(res.success){
                    _this.dataList = res.data.content
                    _this.total = res.data.totalElements
                    _this.isload = false
                    console.log(_this.dataList,'dataList')
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        add(){
            if(!this.brandId){
                this.$message.warning('请先选择品牌！')
                return
            }
            this.item.title = ''
            this.item.id = ''
            this.item.brandId = this.brandId
            this.item.content = ''
            this.item.author = ''
            this.item.shareCount = ''
            this.item.likeCount = ''
            this.item.jumpUrl = ''
            this.item.viewCount = ''
            this.item.isAddParam = 1
            this.item.infoType = 2
            this.item.isOn = 0
            this.item.isTop = 0
            this.fileList = []
            this.visible = true
        },
        async update(record) {
            this.item = JSON.parse(JSON.stringify(record))
            console.log(this.item,'item')
            // let imgArr = record.imgUrl.split(',')
            this.fileList = []
            // for(let i = 0;i < imgArr.length; i++){
            //     let blob = await fileProcess(imgArr[i])
            //     let file = {
            //         name: `${i}.jpg`,
            //         originFileObj: blob,
            //     }
            //     this.fileList.push(file)
            // }
            this.visible = true
        },
        del(record) {
            var formData = new FormData()
            formData.append('brandId',record.brandId)
            formData.append('id',record.id)
            formData.append('isDelete',1)
            updateBanner(formData)
            .then(res=>{
                if(res.success){
                    this.$notification['success']({
                        message: '提示',
                        description: '删除成功',
                        duration: 8,
                    })
                    this.getBanner()
                }else{
                    this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        infoTypeCoput(val){
            if(val === 0 || val){
                let str = ''
                this.infoTypeList.forEach(item=>{
                    if(item.appInfoType == val){
                        str = item.description
                    }
                })
                return str
            }else{
                return val
            }
        },
        isTopeCoput(val){
            if(val === 0 || val){
                let str = ''
                this.isTopList.forEach(item=>{
                    if(item.id == val){
                        str = item.name
                    }
                })
                return str
            }else{
                return val
            }
        },
        // 确定添加、修改轮播图
        handleOk(){
            console.log(this.item,'itm')
            console.log(this.fileList,'filelist')
            var _this = this
            if(_this.item.title == ''){
                this.$message.warning('请输入标题');
                return
            }
            if(_this.item.content == ''){
                this.$message.warning('请输入内容');
                return
            }
            if(_this.item.author == ''){
                this.$message.warning('请输入作者姓名');
                return
            }
            var formData = new FormData()
            formData.append('brandId',_this.item.brandId)
            formData.append('id',_this.item.id)
            formData.append('title',_this.item.title)
            formData.append('content',_this.item.content)
            formData.append('jumpUrl',_this.item.jumpUrl)
            formData.append('author',_this.item.author)
            formData.append('infoType',_this.item.infoType)
            formData.append('shareCount',_this.item.shareCount)
            formData.append('likeCount',_this.item.likeCount)
            formData.append('viewCount',_this.item.viewCount)
            formData.append('isAddParam',_this.item.isAddParam)
            formData.append('isTop',_this.item.isTop)
            formData.append('isOn',_this.item.isOn)
            formData.append('id',_this.item.id)
            formData.append('isDelete',0)
            _this.fileList.forEach(item=>{
                formData.append('img',item.originFileObj)
            })
            formData.append('isFile',true)
            updateBanner(formData)
            .then(res=>{
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: _this.item.id ? '修改成功' : '添加成功',
                        duration: 8,
                    })
                    _this.visible = false
                    _this.getBanner()
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        beforeUpload(file) {
            this.fileList = [...this.fileList, file];
            return false;
        },
        async handlePreview(file) {
            if (!file.url && !file.preview) {
                file.preview = await getBase64(file.originFileObj);
            }
            this.previewImage = file.url || file.preview;
            this.previewVisible = true;
        },
        handleChange({ fileList }) {
            this.fileList = fileList;
        },
        handleCancel() {
            this.previewVisible = false;
        },
        // 预览图片
        showImg(imgs){
            if(imgs){
                this.showImgs = imgs.split(',')
                console.log(this.showImgs,'imgs')
                this.previewImgVisible = true
            }
        },
        getImgUrl(i){
            return this.showImgs[i]
        },
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getBanner()
        },
        // 更换品牌后，需要查询分类和数据
        async getAllData(){
            await this.getClassification()
            this.getBanner() 
        },
    }
}

</script>
<style scoped>
.imgUrl{
    width: 180px;
    height: 100px;
}
.ant-carousel >>> .slick-slide img {
    text-align: center;
    height: 300px;
    line-height: 300px;
    background: #364d79;
    overflow: hidden;
    width: 100%;
}
.ant-carousel >>> .slick-thumb {
  bottom: -15px;
}
.ant-carousel >>> .slick-thumb li {
  width: 60px;
  height: 45px;
}
.ant-carousel >>> .slick-thumb li img {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
}
.ant-carousel >>> .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}
</style>